const { defineConfig } = require("@vue/cli-service");
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
function resolve(dir) {
  return path.join(__dirname, dir);
}
//vue.config.js配置
module.exports = defineConfig({
  productionSourceMap: false, //生产环境是否要生成 sourceMap
  publicPath: "./", //部署应用包时的基本 URL
  outputDir: "dist", //build 时输出的文件目录
  assetsDir: "assets", //放置静态文件夹目录
  devServer: { port: 8090, host: "0.0.0.0", https: false, open: true }, //dev环境下，webpack-dev-server 相关配置*
  // port: 开发运行时的端口* host: 开发运行时域名，设置成'0.0.0.0',在同一个局域网下，如果你的项目在运行，同时可以通过你的http://ip:port/...访问你的项目*
  // https: 是否启用 https* open: npm run serve 时是否直接打开浏览器

  //在vue.config.js如果要新增/修改 webpack 的 plugins 或者 rules , 有2种方式。 configureWebpack 方式 和 chainWebpack 方式
  // 1.configureWebpack 是相对比较简单的一种方式
  // 它可以是一个对象：和 webpack 本身配置方式是一致，该对象将会被 webpack-merge 合并入最终的 webpack 配置
  // 它也可以是一个函数：直接在函数内部进行修改配置
  // configureWebpack: {rules:[],plugins: []}
  configureWebpack: (config) => {
    // 例如，通过判断运行环境，设置mode   config.mode = 'production'
    const plugins = [];
    // gzip压缩
    if (process.env.NODE_ENV === "production") {
      config["performance"] = {
        //打包文件大小配置
        maxEntrypointSize: 10000000,
        maxAssetSize: 30000000,
      };
      plugins.push(
        new CompressionPlugin({
          // gzip压缩配置
          test: /\.js$|\.html$|.\css/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false, // 不删除源文件
        })
      );
    }
    config.plugins = [...config.plugins, ...plugins];
  },

  //2.chainWebpack 链式操作 (高级)，接下来所有的配置我都会在该选项中进行配置
  //2.1规则rules的配置
  //2.1.1rules的新增 在webpack中 rules 是 module 的配置项，而所有的配置的都是挂载到 config 下的，所以新增一个rule方式：
  chainWebpack: (config) => {
    // 通过 style-resources-loader 来添加less全局变量
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) => {
      let rule = config.module.rule("less").oneOf(type);
      rule
        .use("style-resource")
        .loader("style-resources-loader")
        .options({
          patterns: [path.resolve(__dirname, "./lessVariates.less")],
        });
    });
    // `svg-sprite-loader`: 将svg图片以雪碧图的方式在项目中加载
    config.module
      .rule("svg")
      .test(/.svg$/)
      // 匹配svg文件
      .include.add(resolve("src/svg"))
      // 主要匹配src/svg.end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader"); // 使用的loader，主要要npm该插件.options({symbolId: 'svg-[name]'}) // 参数配置}
  },
});
